<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css" />
    <script src="js/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <div class="transtion-box">
          <div class="login-box">
            <h1>欢迎回来</h1>
            <section>
              <label for="username">用户名</label>
              <input type="text" id="username" />
            </section>
            <section>
              <label for="password">密码</label>
              <input type="password" id="password" />
              <span>忘记密码?</span>
            </section>
            <button type="button" onclick="login()">登录</button>
          
          </div>
          <div class="reg-box" style="display: none">
            <h1>立即注册</h1>
            <section>
              <label for="username">用户名</label>
              <input type="text" id="username1" />
            </section>
            <section>
              <label for="email">邮箱</label>
              <input type="text" id="email1" />
            </section>
            <section>
              <label for="password">密码</label>
              <input type="password" id="password1" />
            </section>
            <button type="button" onclick="reg()">注册</button>
            
          </div>
        </div>
        <div class="transferToReg">
          <h1 class="title">还未注册？</h1>
          <span class="subTitle">立即注册，发现大量机会！</span>
          <button type="button" id="transfetBtn">注册</button>
        </div>
      </div>
    </div>
    <script>
      function reg() {
          //获取用户输入的邮箱名和密码和用户名
          var email = jQuery('#email1');
          var password = jQuery('#password1');
          var username=jQuery('#username1');
          //非空校验
          console.log(email.val());
          console.log(password.val());
          console.log(password.val());
          console.log('123');
          if (username.val()=="") {// 要用方法才能显示具体的值
              alert('用户名为空');
              username.focus();
              return;
          }
          if (email.val()=="") {// 要用方法才能显示具体的值
              alert('邮箱为空');
              email.focus();
              return;
          }
          if (password.val()=="") {// 要用方法才能显示具体的值
              alert('密码为空');
              password.focus();
              return;
          }
          
          jQuery.ajax({
              url: "/user/reg",
              type: "POST",
              data: { "email": email.val(), "password": password.val(),"username":username.val()},
              success: function (data) {
                  if (data != null && data.stats == 200) {//执行成功
                      location.href = '/login.html';
                  } else {
                      alert('注册失败,请重新注册');
                  }
              }

          });
      }

      function login() {
          //获取用户输入的邮箱名和密码
          var username = jQuery('#username');
          var password = jQuery('#password');
          
          //非空校验
          if (username.val() == "") {// 要用方法才能显示具体的值
              alert('用户名为空');
              username.focus();
              return;
          }
          if (password.val() == "") {// 要用方法才能显示具体的值
              alert('密码为空');
              password.focus();
              return;
          }
          jQuery.ajax({
              url: "/user/login",
              type: "POST",
              data: { "username": username.val(), "password": password.val()},
              success: function (data) {
                  if (data != null && data.stats == 200) {//执行成功
                      location.href = '/game_hall.html';
                  } else {
                      alert('登录失败,请重新登录');
                  }
              }

          });
      }
      
  </script>
  <script>
    let transfer = document.getElementById('transfetBtn');
    transfer.addEventListener('click', function () {
      let login = document.querySelector('.login-box');
      let reg = document.querySelector('.reg-box');
      let total = document.querySelector('.transtion-box');
      let target = document.querySelector('.transferToReg');
      let title = document.querySelector('.title');
      let subTitle = document.querySelector('.subTitle');
      transfer.innerText === '注册'
        ? (() => {
            target.style.left = 0;
            total.style.left = 260 + 'px';
            transfer.innerText = '登录';
            title.innerText = '已有帐号？';
            subTitle.innerText = '有帐号就登录吧，好久不见了！';
            setTimeout(() => {
              login.style.display = 'none';
              reg.style.display = 'flex';
            }, 300);
          })()
        : (() => {
            target.style.left = 640 + 'px';
            total.style.left = 0;
            transfer.innerText = '注册';
            title.innerText = '还未注册？';
            subTitle.innerText = '立即注册，发现大量机会！';
            setTimeout(() => {
              login.style.display = 'flex';
              reg.style.display = 'none';
            }, 300);
          })();
    });
  </script>
  </body>
</html>
